<%@page import="models.User"%>
<%@page import="java.io.File"%>
<%@page import="models.BeanTweets"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
var numTweets = 5;
$(document).ready(function(){

    
    $('.submitTweet').click(function(){
    	var form = $('#newTweet');
    	$('#rightcolumn').load("TweetController", form.serialize());
    });
    
    $(".delete").click(function(event) {
        $('#rightcolumn').load('TweetController',{deleteTweet: $(this).data('idtweet'), tweetUser:$(this).data('tweetuser')});
	});
    
    $(".allowComments").click(function(event) {
        $('#rightcolumn').load('TweetController',{allowComments: $(this).data('idtweet'), tweetUser:$(this).data('tweetuser')});
	});
    
    $(".disallowComments").click(function(event) {
        $('#rightcolumn').load('TweetController',{disallowComments: $(this).data('idtweet'), tweetUser:$(this).data('tweetuser')});
	});
    
    
    $(".tweetMenu").click(function(event) {
    	$('#rightcolumn').load('TweetController',{filterTweets: $(this).attr('id')});
    });
	
   $(".hideComments").live("click", function(event) {
	    $('#comments' + $(this).data('idtweet')).hide();
	    $('#divShowComments' + $(this).data("idtweet")).show();
	    
	});
    
    $(".showComments").live("click",function(event) {
    	$('#comments' + $(this).data('idtweet')).show();
    	$('#divShowComments' + $(this).data("idtweet")).hide();
    	
    });
    
    $('.submitComment').die("click").live("click",function(){
    	var idtweet=$(this).data("id");
		var form = $('#commentForm' + $(this).data('id'));
		$('#commentsContainer' + $(this).data("id")).load("CommentController", form.serialize(), function(data){
			$('#comments' + idtweet).show();
			$('#divShowComments' +idtweet).hide();
	    });
	});	
	
	$(".deleteComment").die("click").live("click", function(event) {
		var idtweet = $(this).data('idtweet');
		$('#commentsContainer' + $(this).data('idtweet')).load('CommentController',{deleteComment: $(this).data('idcomment')
	    , tweetId: $(this).data('idtweet'), commentUser:$(this).data('commentuser')}, function(data){
	    	$('#comments' + idtweet).show();
	    	$('#divShowComments' +idtweet).hide();
	    });
	});
    
    $(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           numTweets = numTweets + 5;
           $('#loading').fadeToggle("slow", "linear");
           $('#loading').delay(400).toggle( function () {
        	   $('#rightcolumn').load("TweetController", {numTweets:numTweets}, function(data){
              		
       			});
           		}
           );
        }
    });

});


    
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div id="missatge"><% if (request.getAttribute("message") != null) out.print(request.getAttribute("message")); %></div>
<% if(((User)session.getAttribute("currentUser")).getUser().equals(session.getAttribute("user"))){%>
<div class="menu">
<ul> <li><p>Nuevo tweet</a></li></ul>
</div>
<form id="newTweet" name="newTweet" action="" method="POST">
	<TEXTAREA class="tweet-textarea" name="tweet" id="tweet" class="required" maxlength="200"/></TEXTAREA> 
	<input class="submitTweet" type="button" value="Enviar" style="padding:5px; margin:10px;">
</form>
<%}%>
<div id="tweets">
<div class="menu">
<ul><li><a href="#" id="all" class="tweetMenu<%if (session.getAttribute("filterTweets").equals("all")) out.print(" selected"); %>">All Tweets</a></li>
	<li><a href="#" id="my" class="tweetMenu<%if (session.getAttribute("filterTweets").equals("my")) out.print(" selected"); %>">My Tweets</a></li>
</ul>
<br style="clear:left"/>
</div>
<table id="tweetsTable">
<%
if(request.getAttribute("beanTweets") != null){
BeanTweets beanTweets = (BeanTweets)request.getAttribute("beanTweets");
if(beanTweets.getTweets().size()>0) {
for(int i = 0; i < beanTweets.getTweets().size(); i++) { %>
<tr><td class="tdTweet">
<div class="inlineLinks">
Por <a href="HomeController?viewUser=<%=beanTweets.getTweets().get(i).getUser()%>"><%=beanTweets.getTweets().get(i).getUser()%></a> en <%=beanTweets.getTweets().get(i).getTimestamp().toString()%> 
<% if(beanTweets.getTweets().get(i).getUser().equals(session.getAttribute("user"))) { if(beanTweets.getTweets().get(i).isAllowComments()) {%>
| <a class="disallowComments" data-tweetuser="<%=beanTweets.getTweets().get(i).getUser()%>" data-idtweet="<%=beanTweets.getTweets().get(i).getId()%>" href="javascript:void(0);">Deshabilitar comentarios</a> <%} else { %>
| <a class="allowComments" data-tweetuser="<%=beanTweets.getTweets().get(i).getUser()%>" data-idtweet="<%=beanTweets.getTweets().get(i).getId()%>" href="javascript:void(0);">Habilitar comentarios</a><%} }%>
<% if(beanTweets.getTweets().get(i).getUser().equals(session.getAttribute("user")) || session.getAttribute("isAdmin") != null) {%>
| <a class="delete" data-tweetuser="<%=beanTweets.getTweets().get(i).getUser()%>" data-idtweet="<%=beanTweets.getTweets().get(i).getId()%>" href="javascript:void(0);">Eliminar</a> <%} %>

</div>
<div >
<div class="tweetImg">
<% 
String path = getServletContext().getRealPath("/etc/img");
File f = new java.io.File(path + "/tweet_" + beanTweets.getTweets().get(i).getUser() + ".jpg");
if(f.exists()) {%><img  src="./etc/img/tweet_<%=beanTweets.getTweets().get(i).getUser()%>.jpg"/><%}else{ %><img src="./etc/img/tweet_nopic.jpg"/>
<%}  %></div>
<div class="tweetDiv"><p><%= beanTweets.getTweets().get(i).getContent() %></p></div>
</div> 
<div id="commentsContainer<%= beanTweets.getTweets().get(i).getId() %>">
<jsp:include page="/CommentController">
<jsp:param name="tweetId" value="<%=beanTweets.getTweets().get(i).getId() %>" />
</jsp:include>
</div>
</td></tr>
<% }  %>
</table> 
<div style="height:100px">
<div id="loading" style="width:100%; text-align:center; display:none"><h2>Cargando...</h2></div>
</div>
<%} else {%> 
<h3 style="margin-left:10px;">No tweets</h3>
<%} 
}%>

</div>

</body>
</html>